<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE>
<html>
<head>
	<title>编辑展览明细</title>
	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
	<script src="../scripts/boot.js" type="text/javascript"></script>
	<link rel="stylesheet" href="../kindeditor/themes/default/default.css" />
	<link rel="stylesheet" href="../kindeditor/plugins/code/prettify.css" />
	<script charset="utf-8" src="../kindeditor/kindeditor-all-min.js"></script>
	<script charset="utf-8" src="../kindeditor/lang/zh-CN.js"></script>
	<script charset="utf-8" src="../kindeditor/plugins/code/prettify.js"></script>
	<script src="../js/ajaxfileupload.js" type="text/javascript"></script>

	<style type="text/css">
		.mini-required .mini-textbox-border{
			background: none !important;
		}
		html,body {
			margin: 0;
			padding: 0;
			border: 0;
		}
		*{
			font-size:14px;
			font-family:-apple-system-font, "Helvetica Neue", sans-serif;
		}
		.fileWrapper {position: relative;display: inline-block;width: 216px;height: 156px}
		.fileWrapper .uploadFile { position:absolute; top:0; left:0; width:100%; height:100%;z-index: 1;opacity: 0; }

		/*
		.ke-content{font-size: 16px;padding: 50px 76px;width: 100%;box-sizing: border-box;line-height: 1.8;color: #333;text-align:justify;}
		.ke-content img{width: 100%;}
		 */
		.ke-content{width: 90%;margin: 0px auto;padding: 15px 0px;font-size: 16px;line-height: 30px;color: #4c4c4c;}

		.mini-icon {font-size: 18px;line-height: 18px;min-height: 14px;}
		.mini-checkboxlist table label, .mini-radiobuttonlist table label{padding-left:2px;}
	</style>

</head>

<body>
<div class="mini-fit">
	<div class="mini-panel" title="header" iconCls="icon-edit"
		 borderStyle="border:0px" style="width:100%;height:100%;"
		 showHeader="false" showToolbar="false" showCloseButton="false"
		 showFooter="true">

		<div id="form1">
			<input id="id" name="id" class="mini-hidden" value="" />
			<input id="intro" name="intro" class="mini-hidden" value="" />
			<input id="lipic" name="lipic" class="mini-hidden" value="" />
			<table style="margin:0;">
				<tr style="height: 36px;line-height: 36px;">
					<td width="100%" colspan="2">
						标题<span style="color:#CC0000;">*</span>：
						<input name="title" class="mini-textbox" style="width:800px;" required="true"/>
					</td>
				</tr>
				<tr style="height: 36px;line-height: 36px;">
					<td width="50%">
						封面图片<span style="color:#CC0000;">*</span>：
						<div class="fileWrapper">
							<img id="imageTag" style="vertical-align: top;" src="../img/add_project_image.png" width="216" height="156"/>
							<input id="imageInput" name="file" class="uploadFile" type="file" onchange="inputChange(this)" accept="image/png,image/gif,image/jpg,image/jpeg" />
						</div>
					</td>
					<td width="50%" style="vertical-align: top;">
						<table style="width: 100%;padding-top:10px;">
							<tr><td>
								<span style="width: 80px;display: inline-block;text-align: right;">
									报名类别<span style="color:#CC0000;">*</span>：
								</span>
								<div class="mini-radiobuttonlist" name="type" repeatItems="2" value="1" data="typeData"
									 style="width:300px;display: inline-block;vertical-align:middle;" repeatLayout="none"></div>
							</td></tr>
							<tr><td>
								<span style="width: 80px;display: inline-block;text-align: right">
									开始时间<span style="color:#CC0000;">*</span>：
								</span>
								<input name="startTime" class="mini-datepicker" style="width:335px;"
									   format="yyyy-MM-dd HH:mm:ss"  showOkButton="true" showTime="true" showClearButton="false"/>
							</td></tr>
							<tr><td>
								<span style="width: 80px;display: inline-block;text-align: right">
									地址<span style="color:#CC0000;">*</span>：
								</span>
								<input name="address" class="mini-textbox" style="width:335px;"/>
							</td></tr>
						</table>
					</td>
				</tr>
			</table>
			<div style="width:100%;margin-top:6px;">
				<textarea id="editor" name="content1" style="width:100%;height:460px;visibility:hidden;"></textarea>
			</div>
		</div>

		<!--footer-->
		<div property="footer" style="text-align:center;padding:5px">
			<a class="mini-button" plain="true" iconCls="icon-ok" onclick="save()">确定</a>
			<a class="mini-button" plain="true" iconCls="icon-remove" onclick="closeWindow()">取消</a>
		</div>
	</div>
</div>

<script type="text/javascript">
	const typeData = [{id:"1",text:"个人报名"},{id:"2",text:"团体报名"}];
	const contextPath = "${pageContext.request.contextPath}";
	var editorToolbar = [
		'undo', 'redo', '|', 'removeformat', 'clearhtml', '|', 'fontsize', 'bold',
		'italic', 'underline', 'strikethrough','forecolor', 'hilitecolor', '|',
		'justifyleft', 'justifycenter', 'justifyright',
		'justifyfull', 'insertorderedlist', 'insertunorderedlist', '|',
		'image', 'table','hr','emoticons','|','source'
	];
	var editor1;
	KindEditor.ready(function(K) {
		editor1 = K.create('#editor', {
			cssPath : '../kindeditor/style.css?1',
			uploadJson : 'uploadFile',
			//fileManagerJson : '../editor_file_manager.php',
			items : editorToolbar,
			resizeType : 0,
			allowImageRemote : false,
			//allowFileManager : false,
			//fullscreenMode : true,
			afterCreate : function() {
				var self = this;
			}
		});
		prettyPrint();
	});

	$(function(){
		mini.parse();
	});

	function save() {
		var form = new mini.Form("#form1");
		form.validate();
		if (form.isValid() == false)
			return;
		var data = form.getData();
		data.startTime = mini.formatDate(data.startTime, "yyyy-MM-dd HH:mm:ss");
		var html = editor1.html();
		data.content = html;
		var text = editor1.text();
		text = text.replace(/<[^>]+>/g,"");
		text = text.replace(/\s*/g,"");
		console.log(text);
		text = text.replace(/\s/g," ");
		text = text.replace(/\&\w+\;/g," ");
		data.text = text;
		if(text.length > 200){
			data.intro = text.substring(0,200);
		}else{
			data.intro = text;
		}
		mini.mask({
			el: document.body,
			cls: 'mini-mask-loading',
			html: '正在处理，请耐心等待 ...'
		});
		$.ajax({
			url : "save",
			type : "post",
			data : data,
			cache : false,
			success : function(text) {
				mini.unmask();
				var result = mini.decode(text);
				if (result.res) {
					closeWindow("save");
				} else {
					mini.alert(result.msg, "提示");
				}
			},
			error : function(jqXHR, textStatus, errorThrown) {
				mini.unmask();
				alert(jqXHR.responseText);
			}
		});
	}

	function SetData(data) {
		var form = new mini.Form("#form1");
		data = mini.clone(data);
		//data.createTime = mini.formatDate(data.createTime,"yyyy-MM-dd HH:mm:ss");
		form.setData(data);
		//console.log(data);
		editor1.html(data.content);
		if(data.image){
			$("#imageTag").attr("src",contextPath+"/upload/"+data.image);
		}
	}

	//当输入框的值发生改变时触发时间，预览图片必须用change事件，且change事件在HTML页面绑定
	//在js中绑定change事件第二次上传的时候不能预览，这是由于ajaxFileUpload插件克隆input组件导致的
	function inputChange(e){
		console.log("change")
		mini.mask('正在上传');
		$.ajaxFileUpload({
			url: 'ajaxFileUpload', //用于文件上传的服务器端请求地
			method:"post",
			secureuri: false, //是否需要安全协议，一般设置为false
			fileElementId: 'imageInput', //文件上传域的ID
			dataType: 'json',
			success: function (resultBean){
				mini.unmask();
				if(resultBean.res){
					const fileName = resultBean.data;
					console.log(fileName);
					$("#imageTag").attr("src",contextPath+"/upload/"+fileName);
					mini.get("lipic").setValue(fileName);
				}else{
					weui.alert(resultBean.msg);
				}
			},
			error: function (e){
				mini.unmask();
				console.log(e);
			}
		});
	}

	function closeWindow(action) {
		if (window.CloseOwnerWindow)
			return window.CloseOwnerWindow(action);
		else
			window.close();
	}
	function cancel(e) {
		closeWindow(e);
	}

</script>
</body>
</html>